<template>
  <!-- 添加巡检项目-->
  <div class="app-container-add">
    <!-- 功能按钮 -->
    <el-row :gutter="10" class="button-wrap">
      <el-col :span="1.5">
        <el-button icon="el-icon-arrow-left" size="mini" @click="handleReturn()">返回</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button v-clickForbidden icon="el-icon-document-checked" size="mini" @click="handleSave">保存</el-button>
      </el-col>
    </el-row>
    <!-- form表单 -->
    <div class="main-content">
      <el-card class="box-card" shadow="never">
        <div slot="header" class="clearfix">
          <span>添加巡检项目</span>
        </div>
        <div class="main-content-body">
          <el-form ref="formData" class="data-form" :model="formData" :rules="rules" label-width="80px">
            <el-row>
              <el-col>
                <el-form-item prop="date" label="巡查时间">
                  <el-date-picker
                    v-model="formData.date"
                    type="daterange"
                    size="small"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    @change="handleChange"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="" prop="remark">
                  <label slot="label" v-html="`备&emsp;&emsp;注`" />
                  <el-input v-model="formData.remark" style="width:100%" :maxlength="500" :rows="3" type="textarea" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <!--单位-->
          <el-row :gutter="20" class="content">
            <el-col :span="12">
              <el-form :inline="true">
                <el-form-item label="勘察单位">
                  <el-input
                    v-model="filters.name"
                    size="medium"
                    clearable
                    class="serach-person"
                    placeholder="请输入勘察单位名称"
                  />
                </el-form-item>
                <el-button size="small" type="primary" @click="getList">搜索</el-button>
              </el-form>
              <el-table
                ref="multipleTable"
                :data="tableData"
                height="325px"
                style="width: 100%;"
                stripe
                class="table-list"
                @selection-change="handleSelectionChange"
                @row-click="rowChecked"
              >
                <el-table-column type="selection" width="55" />
                <el-table-column prop="name" label="企业名称" min-width="200" align="center" />
                <el-table-column prop="sysEnterpriseType" :show-overflow-tooltip="true" label="企业类型" width="100" align="center">
                  <template slot-scope="{row}">
                    <span v-if="row.sysEnterpriseType === '04'">勘察单位</span>
                  </template>
                </el-table-column>
                <el-table-column prop="creditCodePic" :show-overflow-tooltip="true" label="信用代码" width="180" align="center" />
              </el-table>
              <pagination
                :total="total"
                :page.sync="filters.pageNum"
                :limit.sync="filters.pageSize"
                :page-sizes="[8,15,20,50,100]"
                :page-count="filters.pageCount"
                @pagination="getList"
              />
            </el-col>
            <!--项目-->
            <el-col :span="12">
              <el-form :inline="true">
                <el-form-item label="项目名称">
                  <el-input
                    v-model="filtersPro.proName"
                    size="medium"
                    clearable
                    class="serach-person"
                    placeholder="请输入项目名称"
                  />
                </el-form-item>
                <el-button size="small" type="primary" @click="selectProInfoListStatistics">搜索</el-button>
              </el-form>
              <el-table
                ref="multipleTablePro"
                :data="tableDataPro"
                style="width: 100%;"
                height="325px"
                stripe
                class="table-list"
                @selection-change="handleSelectionChangePro"
                @row-click="rowCheckedPro"
              >
                <el-table-column type="selection" width="55" />
                <el-table-column
                  prop="proName"
                  label="项目名称"
                  min-width="180"
                  align="left"
                  header-align="center"
                  :show-overflow-tooltip="true"
                >
                  <template slot-scope="{row}">
                    <span>{{ row.proName }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="proNum"
                  label="项目编号"
                  min-width="120"
                  align="center"
                  :show-overflow-tooltip="true"
                >
                  <template slot-scope="{row}">
                    <span>{{ row.proNum }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="项目类型"
                  min-width="120 "
                  align="center"
                  prop="proTypeName"
                  :show-overflow-tooltip="true"
                />
                <el-table-column
                  label="项目等级"
                  min-width="80 "
                  align="center"
                  prop="grade"
                  :formatter="formatGradeList"
                />
              </el-table>
              <pagination
                :total="totalPro"
                :page.sync="filtersPro.pageNum"
                :limit.sync="filtersPro.pageSize"
                :page-sizes="[8,15,20,50,100]"
                :page-count="filtersPro.pageCount"
                @pagination="getList"
              />
            </el-col>
          </el-row>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { listSurveyUnit } from '@/api/projectManage/projectData'
import { selectProInfoListStatistics, bathAddSave } from '@/api/projectControl/projectControlAssigned'
import { mapState } from 'vuex'
export default {
  name: 'PatrolProjectAdd',
  data() {
    return {
      /** 巡查表单 start*/
      rules: {
        date: [{ required: true, message: '巡查开始和结束时间不能为空!', trigger: 'change' }],
        remark: [{ required: true, message: '备注不能为空!', trigger: 'blur' }]
      },
      // 巡查表单
      formData: {
        date: '',
        remark: '',
        endTime: '',
        startTime: ''
      },
      /** 巡查表单 end*/

      /** 巡查单位 start*/
      // 选择的单位
      multipleSelection: [],
      // 筛选勘察单位
      filters: {
        pageNum: 1,
        pageSize: 8,
        pageCount: 5,
        name: '',
        sysEnterpriseType: '04'
      },
      // 勘察单位列表
      tableData: [],
      proId: '',
      total: 0,
      /** 巡查单位 end*/

      /** 巡查项目 start*/
      // 选择的单位
      multipleSelectionPro: [],
      // 筛选勘察单位
      filtersPro: {
        pageNum: 1,
        pageSize: 8,
        pageCount: 5,
        proName: ''
      },
      // 勘察单位列表
      tableDataPro: [],
      totalPro: 0
      /** 巡查项目 end*/
    }
  },
  computed: {
    ...mapState({
      needTagsView: (state) => state.settings.tagsView,
      ProStatusList: (state) => state.basicInfo.ProStatusList, // 项目状态
      proGrade: state => state.basicInfo.proGrade, // 项目等级
      enterpriseType: state => state.user.enterpriseType // 单位类型
    })
  },
  mounted() {
    this.getList()
    this.selectProInfoListStatistics()
  },
  methods: {
    // 保存
    async handleSave() {
      this.$refs.formData.validate(async valid => {
        if (valid) {
          const { multipleSelection, multipleSelectionPro } = this
          const { startTime, endTime, remark } = this.formData
          if (multipleSelection.length && multipleSelectionPro.length) {
            const proInspectoTransfer = multipleSelection.map(item => ({ nodeId: item.id, startTime, endTime, remark }))
            const proIds = multipleSelectionPro.map(item => { return item.id })
            await bathAddSave({ proInspectoTransfer, proIds })
            this.msgSuccess('添加成功!')
          }
          this.emptyAddForm()
          this.$router.go(-1)
        }
      })
    },
    // 表单重置
    emptyAddForm() {
      this.resetForm('formData')
      this.multipleSelection = []
      this.multipleSelectionPro = []
    },
    // 返回
    handleReturn() {
      this.$router.go(-1)
    },
    /** 企业 start*/
    handleAdd(title, proId) {
      this.dialogTitle = title
      this.dialogVisible = true
      this.proId = proId
      this.getList()
    },
    // 获取企业
    getList() {
      listSurveyUnit(this.filters).then(res => {
        const { data: { rows, total }} = res
        this.tableData = rows
        this.total = total
      })
    },
    // 添加企业
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 时间范围变化
    handleChange(value) {
      if (!value) {
        this.formData.startTime = ''
        this.formData.endTime = ''
        return
      }
      this.formData.startTime = value[0]
      this.formData.endTime = value[1]
    },
    // 选择行
    rowChecked(row) {
      this.$refs.multipleTable.toggleRowSelection(row)
    },
    /** 企业 end*/

    /** 项目列表 start*/
    // 翻译项目等级
    formatGradeList(row) {
      return this.selectDictLabel(this.proGrade, row.grade)
    },
    // 选择项目
    handleSelectionChangePro(val) {
      this.multipleSelectionPro = val
    },
    // 选择项目
    rowCheckedPro(row) {
      this.$refs.multipleTablePro.toggleRowSelection(row)
    },
    // 获取项目列表
    async selectProInfoListStatistics() {
      const { data: { rows, total }} = await selectProInfoListStatistics({ ...this.filtersPro, enterpriseType: this.enterpriseType })
      this.tableDataPro = rows
      this.totalPro = total
    }
  /** 项目列表end*/
  }
}
</script>

